<!--公共头部-->
{template 'aitimt/common/login_header'}
<style>
    body{background: #ffffff;}
    .login_box{background: #FFF;border-radius: 4px;display: block;padding: 15px;position: fixed;top:3rem;width: 90%;left:5%}
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */color: #e4e4e4;font-size: 14px;}
    ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #e4e4e4;font-size: 14px;}
    ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #e4e4e4;font-size: 14px;}
    ::-ms-input-placeholder { /* Internet Explorer 10-11 */color: #e4e4e4;font-size: 14px;}
    .login_head h2 {font-size: 0.8rem;line-height: 16px;margin-bottom: 16px;color:#06bf04;text-align: center;font-weight: normal}
    .mui-input-row{border-bottom: 1px solid #e4e4e4;}
    .mui-input-row input{border:0;margin: 0;}
    .btn_login:hover{color:#FFF}
    .mui-input-row label {width: 25%;}
    .login-phone{height:2.2rem;margin:5% 0;width: 100%;border-radius: 20px;font-size: 15px;color: #ffffff;background: #f39800;}
    .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea{width: 75%;}
    .welcome{font-size: 12px;color: #4e4e4e;}
    .welcome-avatar{height: 100px;width: 100px;border-radius: 100px;margin: 10% 35%;}
    .welcome-avatar img{width: 100%;border-radius: 100px;}
</style>
</head>
<body>
<div class="mui-content">
    <div class="login_box">
        <p class="welcome">亲爱的微信用户: <span style="color: #f39800">{$_W['fans']['nickname']}</span> </p>
        <p class="welcome">&nbsp;&nbsp;&nbsp;&nbsp;为了及时通知到您有关的赛事通知,需要先绑定您的手机号码,敬请配合</p>
        <div class="welcome-avatar">
            <img src="{$_W['fans']['avatar']}" alt="">
        </div>
        <div class="mui-input-row">
            <input type="text" id='mobile' style="width: 65%;" placeholder="请输入手机号"/>
            <button onclick="sendSms()" id="getCode" style="width: 28%;font-size: 15px;border: 0;">获取验证码</button>
        </div>
        <div class="mui-input-row" id="codeIn">
            <input type="text" id='code'   placeholder="请输入验证码"/>
        </div>

        <button type="button" id="btn_login" class="login-phone">
            确认绑定
        </button>

</div>
<script type="text/javascript">

    mui.init();

    document.getElementById("btn_login").addEventListener('tap', function() {
        var code = $.trim($("#code").val());
        var mobile = $.trim($("#mobile").val());
        var pwd = $.trim($("#pwd").val());
        var mobile_pattern = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
        if (mobile == '') {
            mui.toast('请输入手机号');
            $('#mobile').focus();
            return false;
        }
        if (!mobile_pattern.test(mobile)) {
            mui.toast('请输入正确的手机号');
            $('#mobile').focus();
            return false;
        }
        if (code == '') {
            mui.toast('请输入验证码');
            $('#code').focus();
            return false;
        }
        if (code!=localStorage.getItem('code')){
            mui.toast('验证码错误');
            $('#code').focus();
            return false;
        }
        var arr={mobile:mobile};
        sendPost(arr);

    });
    function sendPost(arr) {
        $.post("{php echo app_url('home/index/login1')}", arr, function(data){
            console.log(data);
            if(data.errno == 0){
                location.href = data.url;
            }else{
                mui.toast(data.msg);
            }
        },"json");
    }
    function sendSms() {
        var mobile = $.trim($("#mobile").val());
        var mobile_pattern = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
        if (mobile == '') {
            mui.toast('请输入手机号');
            $('#mobile').focus();

            return false;
        }
        if (!mobile_pattern.test(mobile)) {
            mui.toast('请输入正确的手机号');
            $('#mobile').focus();
            return false;
        }
        $.post("{php echo app_url('home/index/login1')}", {type:'sms',mobile:mobile}, function(data){
            console.log(data);
            if(data.errno == 0){
                mui.toast(data.msg);
                time();
                localStorage.setItem('code',data.code);
            }else{
                mui.toast('服务器错误！');
            }
        },"json");
    }
    var wait=60;
    function time(){
        var o=document.getElementById('getCode');
        if (wait==0) {
            o.removeAttribute("disabled");
            o.innerHTML="获取验证码";
            o.style.backgroundColor="#fff";
            wait=60;
        }else{
            o.setAttribute("disabled", true);
            o.innerHTML=wait+"(s)";
            o.style.backgroundColor="#8f8b8b";
            wait--;
            setTimeout(function(){
                time(o)
            },1000)
        }
    }
</script>
</body>
</html>
